<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>页面 Pages-JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script type="text/javascript" src="../../style/lib/Jquery126.js" tppabs="http://www.jqmapi.com/style/lib/Jquery126.js"></script>
 </script>
<script type="text/javascript" src="../../style/Jqueryapi.js" tppabs="http://www.jqmapi.com/style/Jqueryapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<hr style="color:#595959;" />

<div class="content">
				<div class="desc">Jquery Mobile支持包含历史回退按钮的自动ajax读取外部页面的功能，一组页面转场动画，以及将页面显示为对话框的简易工具。</div>
				<h1>页面结构 Anatomy of a Page</h1>
  <div class="desc">
				  <div>Jquery Mobile中的&quot;页面&quot;结构已经优化为支持单个的页面，或者在一个页面内嵌入的多个&ldquo;page&rdquo;。</div>
				  <div>使用这种模型的目的是使WEB开发人员使用最佳实践创建WEB网站，使得普通的链接不需要任何特殊配置就可以工作，而且能创造出富媒体的像本地应用一样通过标准的http无法创造出的用户体验。</div>
                  <hr>
				<h1>移动网站页面结构Mobile page structure</h1>
				  <hr />
				  <div>Jquery Mobile网站必须使用HTML5文档声明开始，使得网站能够适用HTML5的特性（不支持HTML5的旧浏览器会安全地静默忽略HTML5的文档声明和一些自定义属性）。
在head标签内需要引用Jquery,Jquery Mobile和mobile的主题CSS文件，我们推荐链接到   jQuery 的CDN上  ：
</div></div>
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <p>&lt;!DOCTYPE html&gt; <br />
				    &lt;html&gt; <br />
  &lt;head&gt; <br />
  　&lt;title&gt;Page Title&lt;/title&gt; </p>
				  <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</pre>
				  <p>
      &lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.css&quot; /&gt;<br />
      &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.Jquery.com/Jquery-1.5.min.js&quot;&gt;&lt;/script&gt;<br />
      &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.js&quot;&gt;&lt;/script&gt;<br />
      &lt;/head&gt; <br />
      &lt;body&gt; </p>
				  <p>...</p>
				  <p>&lt;/body&gt;<br />
				    &lt;/html&gt;</p>
  </div>
				<h1>Viewport的meta标签</h1>  
  <div class="desc">
				  <div>注意在内容之前在HEAD标签内有一个viewport的meta标签设定了浏览器怎样展示页

面的缩放等级和范围。如果没有设置的话，许多移动设备的浏览器会使用一个“虚

拟的”页面宽度，大约是900PX宽，使得桌面的网站工作的也很好，但是这样屏幕看

起来是缩小的而且太宽了。通过设置viewport属性为<strong>content="width=device-

width, initial-scale=1</strong>，会使宽度会被设定为设备的屏幕宽度。</div>
  </div>
				<div class="code">
				  <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; </pre>
                </div>
				<hr />
  <div class="desc">
				  <div>这个设置没有没有禁用用户缩放页面的权限，使得可访问性非常好。但是在iOS设备

上有一个小问题，就是旋转屏幕的时候，这个viewport的设定没有设置宽度，在将

来的版本我们希望能修正。如果有需求的话，你可以设定viewport 的其他的属性来

禁用缩放。</div>
  </div>
				<h1>在body内：pages</h1>  
  <div class="desc">
				  <div>在&lt;body&gt;标签内，移动网站的每一个视图或者“page”都要通过  data-role="page" 属性的标签来定义。</div>
  </div>
				<div class="code">
				  <pre>&lt;div  data-role="page"&gt; 
  	... 
 &lt;/div&gt; </pre>
				</div>
  <div class="desc">
				  <div>在page容器内，任何有效的html标签都可以使用，但是对于Jquery Mobile的典型页面来说，page容器的直接子结点应该为使用"data-role"标记属性为"header""content"和"footer"的3个容器。</div>
  </div>
				<div class="code">&lt;div data-role=&quot;page&quot;&gt; <br />
 　&lt;div data-role=&quot;header&quot;&gt;...&lt;/div&gt; <br /> 
 　
&lt;div data-role=&quot;content&quot;&gt;...&lt;/div&gt; <br /> 
　
&lt;div data-role=&quot;footer&quot;&gt;...&lt;/div&gt; <br />
&lt;/div&gt; </div>
				<h1>一个完整的独立页面实例:　Complete single page template</h1>
  <div class="desc">集合在一起后，这就是一个标准的Jquery Mobile页面的样板了。</div>
				<p class="indent"><strong>html 代码:</strong></p>
				<div class="code">
				  <p>&lt;!DOCTYPE html&gt; <br />
				    &lt;html&gt; <br />
  　&lt;head&gt; <br />
  　　&lt;title&gt;Page Title&lt;/title&gt; </p>
				  <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; </pre>
<p>
      &lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.css&quot; /&gt;<br />
      &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.Jquery.com/Jquery-1.4.3.min.js&quot;&gt;&lt;/script&gt;<br />
      &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.js&quot;&gt;&lt;/script&gt;<br />
      &lt;/head&gt; <br />
      &lt;body&gt; </p>
				  <p>　&lt;div data-role=&quot;page&quot;&gt;</p>
				  <p> 　　&lt;div data-role=&quot;header&quot;&gt;<br />
  　　　&lt;h1&gt;Page Title&lt;/h1&gt;<br />
  　　　&lt;/div&gt;&lt;!-- /header --&gt;</p>
				  <p> 　　　&lt;div data-role=&quot;content&quot;&gt; <br />
  　　　&lt;p&gt;Page content goes here.&lt;/p&gt; <br />
  　　&lt;/div&gt;&lt;!-- /content --&gt;</p>
				  <p> 　&lt;div data-role=&quot;footer&quot;&gt;<br />
  　　&lt;h4&gt;Page Footer&lt;/h4&gt;<br />
  　&lt;/div&gt;&lt;!-- /footer --&gt;<br />
  　&lt;/div&gt;&lt;!-- /page --&gt;</p>
				  <p>&lt;/body&gt;<br />
				    &lt;/html&gt;</p>
				</div>
				<h1>外部页面的链接　External page linking</h1>                
  <div class="desc">Jquery Mobile会自动构建AJAX驱动的站点和应用。</div>
  <div class="desc">默认情况下，当你点击了一个指向外部页面(比如：products.html)的链接，JQmoblie的分析链接地址，然后产生一个ajax请求（Hajax）,显示一个读取中的提示框。</div>   
  <div class="desc">如果AJAX请求成功，新页面的内容会添加到DOM中，所有MOBILE组件都会自动初始化，所以新的页面会通过页面转场动画看到。</div>   
  <div class="desc">如果AJAX请求失败，JQmoblie会显示一个小错误提示框（默认的主题为E）,然后过一会就消失了，不会影响你继续浏览。</div> 
  
				<h1>多个页面的模板结构 Multi-page template structure</h1>   
  <div class="desc">一个独立的html文件可以包含多个“pages”,在加载的时候这些data-role="page"

的div会一起堆栈加载。每一个page区块需要由一个独特的ID(id="foo")标记，通过

给内部链接地址定义为(herf="#foo"),互相跳转。当连接被点击时，JQmoblie会在

文档内寻找带有ID的page容器，然后通过页面转场显示。</div>
  <div class="desc">这是一个包含 2个“page”的站点的示例，通过每个页面的ID进行连接。注意每个

page容器的ID属性只是用来做内部连接导航的，如果每一个PAGE都是一个独立的

HTML文件的话，那这个ID属性就可有可无了。</div> 
<div class="code">
  <p>&lt;body&gt; </p>
  <p>&lt;!-- Start of first page --&gt;<br>
    &lt;div data-role=&quot;page&quot; id=&quot;foo&quot;&gt;</p>
  <p> 	　　　&lt;div data-role=&quot;header&quot;&gt;<br>
  　　　　　&lt;h1&gt;Foo&lt;/h1&gt;<br>
  　　　&lt;/div&gt;&lt;!-- /header --&gt;</p>
  <p> 　　　&lt;div data-role=&quot;content&quot;&gt; <br>
  　　　　　&lt;p&gt;I'm first in the source order so I'm shown as the page.&lt;/p&gt; <br>
  　　　　　&lt;p&gt;View internal page called &lt;a href=&quot;#bar&quot;&gt;bar&lt;/a&gt;&lt;/p&gt; <br>
  　　&lt;/div&gt;&lt;!-- /content --&gt;</p>
  <p> 　　&lt;div data-role=&quot;footer&quot;&gt;<br>
  　　　　&lt;h4&gt;Page Footer&lt;/h4&gt;<br>
  　　&lt;/div&gt;&lt;!-- /footer --&gt;<br>
  　　&lt;/div&gt;&lt;!-- /page --&gt;<br>
  </p>
  <p>&lt;!-- Start of second page --&gt;<br>
    　　&lt;div data-role=&quot;page&quot; id=&quot;bar&quot;&gt;</p>
  <p> 　　&lt;div data-role=&quot;header&quot;&gt;<br>
  　　　&lt;h1&gt;Bar&lt;/h1&gt;<br>
  　&lt;/div&gt;&lt;!-- /header --&gt;</p>
  <p> 　　&lt;div data-role=&quot;content&quot;&gt; <br>
  　　　&lt;p&gt;I'm first in the source order so I'm shown as the page.&lt;/p&gt; <br>
  　　　&lt;p&gt;&lt;a href=&quot;#foo&quot;&gt;Back to foo&lt;/a&gt;&lt;/p&gt; <br>
  　&lt;/div&gt;&lt;!-- /content --&gt;</p>
  <p> 　&lt;div data-role=&quot;footer&quot;&gt;<br>
  　　&lt;h4&gt;Page Footer&lt;/h4&gt;<br>
  　&lt;/div&gt;&lt;!-- /footer --&gt;<br>
  　&lt;/div&gt;&lt;!-- /page --&gt;<br>
  &lt;/body&gt;</p>
</div>
<div class="desc"><strong>请注意</strong>：我们对于所有AJAX的"page"使用的是哈希值来跟踪导航历史，所以现在还不可以通过外部页面的一个ID指向那一个锚点，因为Jquery Mobile会寻找带有该ID的"page",而不是滚屏到带有该ID的内容上。</div>
<h1>一些约定，不是要求　　Conventions, not requirements</h1>  
  <div class="desc">
    <p>尽管上述的页面结构是通过jQuery Mobile构建移动网站的标准格式，但是jqm框架
      
      是一个灵活的框架。page, header, content, and footer和data-role元素都是可
      
      选的。 page 容器用来进行页面初始化，但是现在的版本对于单独的page 文档也不
      
      是必须的。对于一个自定义布局的页面，所有的这些结构元素都可以没有，但是基
      
      于AJAX的导航和组件都必须在标准的结构中才能工作。如果页面没有page 容器，
      
      jqm会自动插入一个，因为需要这样一个容器来管理页面，但是基本的标记现在可以
      
      写的非常简单了。</p>
    <p>注意：在多PAGE的结构中，你在页面必须要有多个page标签的容器。</p>
  </div>
	<h1>后退链接　Back linking</h1>  
    
  <div class="desc">如果你添加了data-rel="back"属性给某个链接，那对于该链接的任何点击行为，都是后退的行为，会无视链接的herf，后退到浏览器历史的上一个地址。
当想链接到一个命名好的页面，或者要关闭对话框时特别有用。使用这一特性时要注意：务必请使用一个有意义的herf值实际地指向要引用的地址（因为这样也会让GRADE-C的浏览器也支持这个按钮）。而且如果你只是要看到一个翻转的页面转场而不是真正的回到上一个历史记录的地址，你就要使用data-direction="reverse"属性，而不是后退链接。</div>
    
    
 	<h1>重定向以及链接到目录　Redirects and linking to directories</h1>  
    
  <div class="desc">当连接到的是一个目录地址（比如href="typesofcats/"而不是href="typesofcats/index.html"），你必须在地址后面加一个斜杠("/")。因为Jquery Mobile假定最后一个斜杠后的部分为文件名，当接下来引用到的页面生成基地址的会的时候会删除它。</div>  
  <div class="desc">但是，你可以通过已经指定好的data-url地址来返回到上一个page容器，就可以绕过这一个问题。Jquery Mobile 会使用那个data-url值来更新url，来替代过去请求的那个页面  。这样你也允许你通过返回url的更改来作为重定向的结果。例如：你想通过post方式提交表单到  /login.html&quot;，但是提交成功以后返回一个url为  &quot;/account 。这个工具就可以让你在这种情况下控制历史记录堆栈。以下是一个实例：</div>
<div class="desc">有一个链接是指向  &nbsp;&quot;docs-links-urltest/index.html&quot; ，该链接是指向目录的索引页，返回的页面会使用  &quot;docs/pages/docs-links-urltest/&quot; 更新哈希值，这是通过代码里的  data-url&nbsp;值完成的。请注意data-url值会替换整个哈希值，由你来把他替换成当刷新或者下层链接时URL发出的请求能解析正确的页面.  </div>
<div class="desc">更多技术细节请参见导航模型Ajax, hashes and history</div>

</div>
</div>


</body>
</html>



